<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>案例展示中心</title>
		<link rel="shortcut icon" href="build/img/azil-orange-ico.png">
		<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<style type="text/css">
			[v-cloak] {
				display: none
			}
			.my-header {
				position: fixed;
				width: 100%;
				top: 0;
				left: 0;
				z-index: 1;
			}
			.case-box>a {
				color: #337ab7;
			}
			.case-box>a>img {
				height: 9.375rem;
				min-height: 150px;
				max-width: 100%;
				border-radius: 0.9375rem;
			}
			.case-box>a>h3 {
				font-size: 1.5rem;
				margin-top: 1.25rem;
				margin-bottom: 0.625rem;
			}
			.applet {
				background-color: #2F4254;
			}
			.applet h1 {
				color: #fff;
			}
			.case-item {
				padding-top: 3.5rem;
			}
		</style>
	</head>

	<body>
		<main id="app" v-cloak>
			<header class="my-header">
				<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
					<a class="navbar-brand" href="#">
						<img height="50px" src="build/img/azil-white.png" >
					</a>
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
					 aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>

					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul class="navbar-nav ml-auto">
							<li v-for="item in caseList" :key="'nav-item-' + item.type">
								<a class="nav-link" :href="'#' + item.type">{{ item.name }}</a>
							</li>
						</ul>
					</div>
				</nav>
			</header>
			
			<section class="container-fluid">
				<template v-for="item in caseList">
					<div :id="item.type" class="case-item">
						<hr />
						<div :class="['text-center p-1', item.type]">
							<h1><a :disabled="item.disabled" :href="'#' + item.type"># {{ item.name }}</a></h1>
						</div>
						<hr />
						<div class="row">
							<template v-for="citem in item.list">
								<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 text-center case-box">
									<a target="_blank" :href="citem.url">
										<img :src="citem.imgSrc" />
										<h3>{{ citem.name | checkText }}</h3>
										<samp>{{ citem.samp | checkText }}</samp>
										<p v-if="citem.desc" style="color: red;">{{ citem.desc | checkText }}</p>
									</a>
								</div>
							</template>
						</div>
					</div>
				</template>
			</section>
			
			<footer style="height: 300px;"></footer>
		</main>
		
		<script src="//cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<script src="//cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
		<script type="text/javascript">
			// var officeLive = 'https://view.officeapps.live.com/op/view.aspx?src=' + window.location.href + 'build/office/'
			new Vue({
				el: "#app",
				filters: {
					checkText: function(value) {
						return value ? value : ""
					}
				},
				data: function() {
					return {
						caseList: [{
							name: "移动端案例",
							type: "mobile",
							list: [{
								name: "小鹿寻城|寻城味道",
								imgSrc: "https://pic.imgdb.cn/item/6254f18c239250f7c5093c4e.jpg",
								url: "http://m.xunchengweidao.com/xuncheng",
								samp: "2017年",
								desc: "已下线"
							}, {
								name: "2016年中信银行半年度业绩发布",
								imgSrc: "build/img/zxyh.png",
								url: "2016zqhb/2016zqhb_index.html",
								samp: "2016年"
							}, {
								name: "2015年招商银行年度业绩发布",
								imgSrc: "build/img/zsyh2015.jpg",
								url: "http://cmbchina2016.allyes.com/2015nb/index.html",
								samp: "2015年"
							}]
						}, {
							name: "PC案例",
							type: "pc",
							list: [{
								name: "跳房子小游戏",
								imgSrc: "https://wkphoto.cdn.bcebos.com/d009b3de9c82d15823f0c5d3900a19d8bc3e4266.jpg",
								url: "https://topoadmin.github.io/Game/puzzle/1/index.html",
								samp: "2021年"
							},{
								name: "ITCsec",
								imgSrc: "build/img/itcsec1.jpg",
								url: "itcsec/index.html",
								samp: "2018年"
							}, {
								name: "NearWhite",
								imgSrc: "build/img/nearwhite.png",
								url: "nearwhite/index.html",
								samp: "2017年（未完跑路）"
							}, {
								name: "美游人生",
								imgSrc: "build/img/tata.jpg",
								url: "tata/Home/home.html",
								samp: "2016年",
								desc: "已下线"
							}, {
								name: "Jtopo",
								imgSrc: "build/img/jtopo.jpg",
								url: "topo/index.html",
								samp: "2015年"
							}]
						}, {
							name: "小程序案例",
							type: "applet",
							list: []
						}, {
							name: "我的简历",
							type: "resume",
							list: [{
								name: "蓝色",
								imgSrc: "build/img/resume2.jpg",
								url: "resume2/index.html",
								samp: "2019年"
							}, {
								name: "黑色",
								imgSrc: "build/img/resume.jpg",
								url: "resume/index.html",
								samp: "2018年"
							}]
						}
					]}
				}
			})
		</script>
	</body>

</html>
